<!-- 表单案例 -->
<template>
  <!-- 应用容器 -->
  <div class="app-container">
    <h1>单选框/多选框/级联选择框-数据不存在回显异常处理方案</h1>

    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="单选框">
        <el-select v-model="form.selectOneId" placeholder="请选择">
          <el-option
            v-for="item in optionsOne"
            :key="item.id"
            :label="item.name"
            :disabled="item.disabled"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="多选框">
        <el-select v-model="form.selectManyIds" multiple placeholder="请选择">
          <el-option
            v-for="item in optionsMany"
            :key="item.id"
            :label="item.name"
            :disabled="item.disabled"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

    <!-- 当 jsonOutput 有值时，以预格式化的方式展示生成的 JSON 数据 -->
    <pre v-if="jsonOutput">{{ jsonOutput }}</pre>
  </div>
</template>

<script>
import {selectSingleValue,selectMultipleValue} from '@/utils/arrayUtil.js'

export default {
  // 组件接收的属性，这里为空
  props: {},

  // 组件的数据状态
  data() {
    return {
      optionsOne: [{
        id: '1',
        name: '黄金糕'
      }, {
        id: '2',
        name: '双皮奶'
      }, {
        id: '3',
        name: '蚵仔煎'
      }, {
        id: '4',
        name: '龙须面'
      }, {
        id: '5',
        name: '北京烤鸭'
      }],

      optionsMany: [{
        id: '1',
        name: '黄金糕'
      }, {
        id: '2',
        name: '双皮奶'
      }, {
        id: '3',
        name: '蚵仔煎'
      }, {
        id: '4',
        name: '龙须面'
      }, {
        id: '5',
        name: '北京烤鸭'
      }],

      form: {
        selectOneId: '',
        // 后端返回
        selectOneName: '',
        selectManyIds:[],
        // 后端返回
        selectMany: []
      },

      jsonOutput:""
    };
  },

  // 计算属性，这里为空
  computed: {},

  // 监听器，这里为空
  watch: {},

  // 组件的方法
  methods: {
    onSubmit() {
      this.jsonOutput = "提交详情成功！\n"+JSON.stringify(this.form, null, 2);
      console.log('submit!');
    },
    // 查询详情
    queryItem() {
      // 调用后端接口获取数据
      let formData = {
        selectOneId: 6,
        selectOneName: '第六个',
        selectManyIds: ['5', '6'],
        selectMany: [
          {
            id: '5',
            name: '北京烤鸭'
          }, {
            id: '6',
            name: '第六个'
          }
        ]
      };
      // 将数据赋值给 form 对象
      this.form = formData;
      this.jsonOutput = "查询详情成功！\n"+JSON.stringify(this.form, null, 2);
      console.log('queryItem!');
    },

    initSelectOptions(){
    //   单选框
      this.optionsOne = selectSingleValue(this.optionsOne,"id","name",{"id":this.form.selectOneId,"name":this.form.selectOneName});
      console.log("详情对比单选框",this.optionsOne)
    //   多选框
      this.optionsMany = selectMultipleValue(this.optionsMany,"id","name",this.form.selectMany);
      console.log("详情对比多选框",this.optionsMany)
    }
  },

  // 组件创建完成后执行的钩子函数，初始化表格数据
  created() {
    // 查询详情
    this.queryItem();
    //初始化选择器列表信息
    this.initSelectOptions();
  },

  // 组件挂载完成后执行的钩子函数，这里为空
  mounted() {
  },

  // 组件创建前执行的钩子函数，这里为空
  beforeCreate() {
  },

  // 组件挂载前执行的钩子函数，这里为空
  beforeMount() {
  },

  // 组件更新前执行的钩子函数，这里为空
  beforeUpdate() {
  },

  // 组件更新后执行的钩子函数，这里为空
  updated() {
  },

  // 组件销毁前执行的钩子函数，这里为空
  beforeDestroy() {
  },

  // 组件销毁后执行的钩子函数，这里为空
  destroyed() {
  },

  // 组件被激活时执行的钩子函数（如果使用了 keep-alive），这里为空
  activated() {
  }
};
</script>

<style scoped>
/* 可以添加自定义样式 */
</style>
